<template>
  <div class="mall fixed bottom-0 left-0 right-0 top-0 h-100% w-full overflow-y-auto">
    <div>
      <image
        :src="`${cdnUrl1}/imgs/xy/home/Group%206652.png`"
        class="absolute left-0 right-0 top-0 z--99 w-full" mode="scaleToFill" />
      <!-- 输入框 -->
      <div class="sreach sticky left-0 right-0 top-0 z-5 h-full bg-hex-fff bg-hex-fff px-28rpx pb-32rpx" :style="{ paddingTop: `${searchBarTop}px` }">
        <div :style="{ marginRight: `${rightBar}px` }" @click="navTo('/pages-shop/goodsSeach')">
          <div class="mb-26rpx flex items-center justify-start text-32rpx font-600 text-hex-fff">
            <span>心悦店铺</span>
            <span><img class="h-24rpx w-24rpx" :src="`${cdnUrl1}/imgs/xy/home/Group%206191.png`" alt="" srcset=""></span>
          </div>
          <div class="flex items-center">
            <div class="relative w-full">
              <input class="h-68rpx flex-1 rounded-50 bg-hex-fff pl-100rpx"
                     disabled
                     placeholder-class="text-hex-CBCBCBFF text-26rpx font-400" type="text" placeholder="养生膳食">
              <div class="absolute left-32rpx top-50% h-40rpx w-40rpx translate-y-(-50%)">
                <image :src="`${cdnUrl}/imgs/shop/search.png${imgVersion}`" mode="scaleToFill" class="h-full w-full" />
              </div>
              <div class="absolute left-84rpx top-50% h-20rpx w-2rpx translate-y-(-50%) bg-hex-D9D9D9FF" />
              <div
                class="absolute right-10rpx top-50% box-border h-50rpx w-105rpx translate-y-(-50%) rounded-full bg-hex-FF8B00 text-center leading-50rpx text-hex-fff">
                搜索</div>
            </div>
          </div>
        </div>
      </div>
      <div class="px-28rpx">
        <!-- 轮播图 -->
        <div class="mt-26rpx">
          <swiper autoplay circular class="h-216rpx">
            <swiper-item v-for="item in bannerList" class="overflow-hidden rounded-32rpx -z-9">
              <image :src="item.imageUrl" class="h-216rpx w-full rounded-32rpx" />
            </swiper-item>
          </swiper>
        </div>
        <div class="mt-26rpx">
          <swiper autoplay circular class="h-216rpx" 
                  :indicator-dots="bannerMenu.length>1" indicator-color="rgba(0,0,0,0.25)" indicator-active-color="rgba(255,139,0)">
            <swiper-item v-for="v in bannerMenu" class="overflow-hidden rounded-32rpx -z-9">
              <div class="mt-26rpx box-border flex flex-wrap justify-between rounded-32rpx bg-hex-fff">
                <div v-for="(item, index) in v.item" :key="index"
                     class="w-96rpx flex flex-col items-center">
                  <image :src="item.image" class="h-96rpx w-96rpx" mode="widthFix" />
                  <text class="mt-10rpx text-24rpx font-400 text-hex-212424">{{ item.name }}</text>
                </div>
              </div>
            </swiper-item>
          </swiper>
        </div>
        <div class="recommend mt-26rpx h-372rpx p-32rpx">
          <div class="flex items-center justify-end text-24rpx">
            <span>查看更多</span>
            <img :src="`${cdnUrl1}/imgs/xy/home/Group%206383.png`" class="h-32rpx w-32rpx" alt="" srcset="">
          </div>
          <div class="mt-26rpx flex justify-between">
            <div v-for="item in productList" class="h-160rpx w-184rpx">
              <div class="relative">
                <image :src="item.productImage" class="h-160rpx w-184rpx" />
                <div
                  class="absolute bottom-0 left-0 rounded-tr-20rpx bg-hex-FEF2F1 px-20rpx text-16rpx font-600 text-hex-ff4d4e">
                  限购{{ item.limitBuyAmount }}件</div>
              </div>
              <div class="hide2 mt-16rpx text-24rpx font-600 text-hex-333">
                {{ item.productName }}
              </div>
              <div class="mt-12rpx text-24rpx font-600 text-hex-FF4E4E">¥{{ item.productPrice }}</div>
            </div>
          </div>
        </div>
        <div class="h-224rpx">
          <img :src="`${cdnUrl1}/imgs/xy/home/Group%206600.png`" class="h-224rpx w-100%">
        </div>
        <next-tabs v-model:value="current1" 
                   color="#8C9496"
                   lineColor="#FF8B00" 
                   activeColor="#FF8B00" 
                   :tabs="['推荐', '养生套餐', '骨骼健康套餐', '血液健康套餐']" />
        <div class="mt-26rpx">
          <div class="h-208rpx flex">
            <div class="h-160rpx w-208rpx">
              <img class="h-160rpx w-208rpx rounded-2" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01k5JmTZ2Mw8BgQ5lml_%21%211598339891-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705480041&t=3e11039d466666deb4f8f10f51d90dbc" alt="" srcset="">
            </div>
            <div class="ml-16rpx flex flex-1 flex-col">
              <div class="hide2 text-32rpx text-hex-212424">冻干海藻固体饮料冻干海藻固体饮料</div>
              <div class="flex flex-1 items-center justify-between text-hex-FF8B00">
                <div>
                  <span class="text-28rpx">￥</span>
                  <span class="text-40rpx">3200</span>
                </div>
                <div>
                  <img :src="`${cdnUrl1}/imgs/xy/home/car.png`" class="h-48rpx w-48rpx">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-120rpx" />
      </div>
    </div>
  </div>
  <div class="navBarBox h-167rpx">
    <tab-bar />
  </div>
</template>

<script lang="ts" setup>

let searchBarTop: any = $ref('24')
let rightBar: any = $ref()
onLoad(() => {
  uni.hideTabBar()
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width
  // #endif
})
let current1 = $ref(0)
let bannerList = $ref([{ imageUrl: `${cdnUrl1}/imgs/xy/home/Group%206600.png` }])
let bannerMenu = $ref([{
  item: [
    { image: `${cdnUrl1}/imgs/xy/home/icon-52pt.png`, name: '细胞疗养' },
    { image: `${cdnUrl1}/imgs/xy/home/icon-49pt.png`, name: '养老保健' }, 
    { image: `${cdnUrl1}/imgs/xy/home/icon-48pt.png`, name: '护肤抗老' },
    { image: `${cdnUrl1}/imgs/xy/home/icon-50pt.png`, name: '肠胃吸收' },
    { image: `${cdnUrl1}/imgs/xy/home/icon-51pt.png`, name: '健康饮料' },
  ], 
}])
let productList = $ref([
  {
    productImage: `${cdnUrl1}/imgs/xy/home/x1.png`, limitBuyAmount: '1', productName: '【个护上新】夏被四件套纯棉...', productPrice: '300',
  },
  {
    productImage: `${cdnUrl1}/imgs/xy/home/x2.png`, limitBuyAmount: '1', productName: '【个护上新】夏被四件套纯棉...', productPrice: '300',
  },
  {
    productImage: `${cdnUrl1}/imgs/xy/home/x3.png`, limitBuyAmount: '1', productName: '【个护上新】夏被四件套纯棉...', productPrice: '300',
  },
])
//路由跳转
const navTo = (url) => {
  if (url) {
    uni.navigateTo({ url })
  }
}

</script>

<route lang="json">
{"style":{"disableScroll":true}}
</route>

<style  lang="scss" scoped>

.mall {
  ::v-deep .uni-icons{
    color: #18a786 !important;
  }

  .hide2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .sreach{
    background-image: url('https://cdn.qqyoung.com/ky/imgs/xy/home/Group%206652.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .recommend{
background-image: url('https://cdn.qqyoung.com/ky/imgs/xy/home/Group%206655.png');
    background-size: 100%;
    background-repeat: no-repeat;    
  }
  .bgpreferential {
    background: linear-gradient(180deg, #FEDADD 0%, rgb(255 255 255 / 0%) 100%);
  }

}

</style>
